<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>方圆小程序后台管理</title>

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/cropper.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">

	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="css/all.css">
	<link rel="stylesheet" href="css/public.css">
	<style>
	a:hover{
		text-decoration: none;
	}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">方圆小程序</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="index.html">首页</a></li>
				<li class="layui-nav-item"><a href="shopdata.html">运营</a></li>
				<li class="layui-nav-item"><a href="setting.html">设置</a></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">手边卡券</li>
				<li class="layui-nav-item">
					<a href="center.html">
						你好，170600001
					</a>
					<dl class="layui-nav-child">
						<dd><a href="">基本资料</a></dd>
						<dd><a href="">安全设置</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item"><a href="">帮助</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree">
					<li class="layui-nav-item">
						<a href="javascript:;"><img src="images/shop_normal.png" alt="" class="menuicon">商户管理</a>
						<dl class="layui-nav-child">
							<dd><a href="shopdata.html">商户数据</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;"><img src="images/mendian_normal.png" alt="" class="menuicon">门店展示管理</a>
						<dl class="layui-nav-child">
							<dd><a href="paidstore.html">付费门店管理</a></dd>
							<dd><a href="freestore.html">免费入驻管理</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;"><img src="images/guanggao__normal.png" alt="" class="menuicon">广告位设置</a>
						<dl class="layui-nav-child">
							<dd><a href="topbanner.html">顶部Banner设置</a></dd>
							<dd><a href="recommend.html">推荐店铺设置</a></dd>
							<dd><a href="anglemark.html">角标店铺设置</a></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>

		<div class="layui-body j-layui-body">
			<!-- 内容主体区域 -->
			<div class="j-contaner">
				<span class="layui-breadcrumb">
					<a href="shopdata.html">设置</a>
					<a href="shopdata.html">广告位设置</a>
					<a href="shopdata.html">顶部Banner设置</a>
					<a href="shopdata.html">新增Banner</a>
				</span>
			</div>

			<div class="j-contaner layui-row">
				<div class="layui-col-xs6 j-bd">
					<div class="j-contaner-s"><div class="shuxian layui-inline"></div>新增Banner</div>
					<form action="">
						<div class="layui-form-item">
							<label class="layui-form-label j-lable1"><lable class="xinghao">*</lable>选择图片</label>
							<div class="addpic">
								<img src="" alt="" id="picbox" class="picbox">
								<div class="chooseimg">
									<label for="xzfile" class="filelable"></label>
									<input type="file" name="file" id="xzfile" class="inputfile" />
								</div>
							</div>
							<label class="layui-form-label j-lable3 fl">(建议图片尺寸：864X359)</label>
						</div>

						<div class="layui-form-item mt1">
							<label class="layui-form-label j-lable1"><lable class="xinghao">*</lable>跳转店铺</label>
							<a class="layui-btn layui-btn-normal fl ml3" onclick="xzshop()">选择店铺</a>
							<label class="layui-form-label j-lable8" id="shopname">（店铺名称）</label>
						</div>

						<div class="layui-form-item ml4 mt1">
							<a class="layui-btn layui-btn-normal" onclick="yulan()">预览</a>
							<button class="layui-btn layui-btn-normal" id="submit">添加</button>
							<a class="layui-btn layui-btn-normal">取消</a>
						</div>
					</form>
				</div>

				<div class="layui-col-xs6">
					<div class="j-contaner">
						<div class="j-lable2">预览效果</div>
						<div class="j-yldiv">
							<div class="bannerylbox">
								<img src="" alt="" id="xiaoguo" class="banneryulan">
							</div>
							<img src="images/xcx_bg.png" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="jc" style="display: none;">
	<div class="jctop">
		<h2>上传图片</h2>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-9">
				<div class="img-container" style="width: 848px;height: 464px">
					<img src="" alt="Picture" id="cropimg">
				</div>
			</div>
			<div class="col-md-3">
				<div class="docs-preview clearfix">
					<div class="img-preview preview-lg"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="btn-group btn-group-crop ml5">
				<button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 764, &quot;height&quot;: 318 }" type="button" onclick="closeplayer()">
					<span class="docs-tooltip" data-toggle="tooltip">裁剪</span>
				</button>
			</div>
		</div>
	</div>
</div>

<div id="pop" style="display: none;">
	<div class="larry-theme-form">
		<div class="nbtitle">
			<h3>店铺列表</h3>
		</div>
		<label class="layui-form-label layui-inline j-lable1">店铺名称:</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" id="date1" placeholder="请输入店铺名称">
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<button class="layui-btn">查询</button>
			</div>
		</div>
		<table id="tab1" class="tablen"></table>
	</div>
</div>

<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
<script src="js/cropper.js"></script>
<script src="js/main.js"></script>

<script>

	layui.use(['element','upload','form','layer','table'], function(){
		var $ = layui.jquery;
		var element = layui.element;
		var form = layui.form;
		var layer = layui.layer;
		var upload = layui.upload;
		var table = layui.table;

		table.render({
			elem: '#tab1'
			,url:''
			,cellMinWidth: 96.8
			,cols: [[
			{field:'id', title: '序号', sort: true ,align: 'left',width:'300'}
			,{field:'name', title: '商户名称' ,align: 'left',width:'300'}
			]]
			,page: true
		});
	});
	
    //开启裁剪
    $('#xzfile').on('change', function(ev) {
    	let $file = $(this);
    	let fileObj = $file[0];
    	let windowURL = window.URL || window.webkitURL;
    	let dataURL = null;
    	if (!fileObj || !fileObj.files || !fileObj.files[0]) return;
    	dataURL = windowURL.createObjectURL(fileObj.files[0]);
    	$("#cropimg").attr('src', dataURL);
    	$("#cropimg").cropper({
    		aspectRatio: 1 / 1,
    		viewMode : 1,
    		rotatable: false,
    		guides :false,
    		dragMode : "move",
    		background : true,
    		movable : true,
    		cropBoxMovable :false,
    		cropBoxResizable :false,
    	});
    	$("#cropimg").cropper('replace', dataURL);
    	cjpic();
    });

	//裁剪弹窗
	function cjpic(){
		layer.open({
			type: 1,
			title: false,
			closeBtn: true,
			shadeClose: true,
			shade: 0.55,
			area: ['1300px', '610px'],
			isOutAnim: true,
			content: $('#jc'),
			success: function (layero, index) {
			}
		});
	};

	//关闭裁剪弹窗
	function closeplayer(){
		layer.close(layer.index);
	};

	//选择店铺弹窗
	function xzshop(){
		layer.open({
			type: 1,
			title: false,
			closeBtn: true,
			shadeClose: true,
			shade: 0.55,
			area: ['770px', '750px'],
			isOutAnim: true,
			resize: false,
			content: $('#pop'),
			success: function (layero, index) {

			}
		})
	};

	//预览
	function yulan(){
		var aaa = document.getElementById("picbox").src;
		$('#xiaoguo').attr('src',aaa);
	};

</script>
</body>
</html>